<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-07-23 10:16:35
 * @LastEditors: jgg
 * @LastEditTime: 2022-02-28 14:38:39
-->
<template>
    <div class="wrap">
        <div class="search_table">
            <div class="search_box">
                <div class="search_wrap">
                    <div class="search_item">
                        <el-input class="input_item" v-model="form.name" placeholder="请输入IP/操作内容"/>
                    </div>
                    <div class="search_item">
                        <el-date-picker
                        v-model="form.time"
                        type="daterange"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        @change="timeChange">
                        <!-- :default-time="defaultTime" -->
                        </el-date-picker>
                    </div>
                     
    
                    <el-button type="primary" @click="onSearch">查询</el-button>
                </div>
            </div>
            <div class="table_box">
                <el-table
                    v-loading="loading"
                    class="el_table"
                    :data="tableData"
                    empty-text="暂无数据"
                    :height="height"
                    :row-class-name="tableRowClass"
                    :show-header="true"
                    :header-cell-style="{backgroundColor:'#EEF6FF',height:'48px'}"
                >
                    <el-table-column type="index" label="序号" width="60"></el-table-column>
                    <el-table-column
                        v-for="(item, index) in tableTitle"
                        :key="index"
                        :prop="item.prop"
                        :label="item.label"
                        :width="item.width ? item.width:''"
                        :formatter="item.formatter"
                    >
                    </el-table-column>
                    
                    <!-- <el-table-column label="操作" width="220">
                        <template v-slot="scope">
                            <el-button type="text" icon="el-icon-view" size='medium' @click="onDetail(scope.$index, scope.row)" >查看</el-button>
                            <el-button  icon="el-icon-edit" type="text" size='medium'  @click="onEdit(scope.$index, scope.row)" >编辑</el-button>
                            <el-button type="text" class="danger" icon="el-icon-delete" size='medium' @click="onDelete(scope.$index, scope.row)" >删除</el-button>
                        </template>
                    </el-table-column> -->
                </el-table>
                <el-pagination
                    class="el_footer"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="form.currPage"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="form.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="form.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { formatTimestamp } from '@/utils/common'
import getTableHeight from '@/utils/mixins'
import userApi from '@/api/user'
export default {
    name: 'operationLog',
    mixins:[getTableHeight],
    components:{
    },
    data(){
        return {
            defaultTime: new Date(2000, 1, 1, 12, 0, 0),
            form:{
                currPage:1,
                pageSize:20,
                total: 0,
                name:'',
                time:null,
            },
            // 表格
            loading: false,
            tableData:[
            ],
            tableTitle: [
                {
                    prop: 'operateName',
                    label: '用户',
                },
                {
                    prop: 'operateIp',
                    label: 'IP地址'
                },
                {
                    prop: 'businessName',
                    label: '操作内容'
                },
                {
                    prop: 'operateTime',
                    label: '操作时间'
                }
            ],
        }
    },
    mounted(){
        this.getData()
    },
    methods:{
        // 查询
        onSearch(){
            this.form.currPage = 1
            this.getData()
        },
        timeChange(val){
            if(val != null){
                this.form.time[0] = formatTimestamp(this.form.time[0])
                this.form.time[1] = formatTimestamp(this.form.time[1])
            }
        },
        getData(){
            this.loading = true
            userApi.getList({
                current:this.form.currPage,
                pageSize:this.form.pageSize,
                name:this.form.name,
                startTime:this.form.time != null ? this.form.time[0] : '',
                endTime:this.form.time != null ? this.form.time[1] : ''
            }).then((res)=>{
                this.tableData = res.data.records
                this.form.total = res.data.total
                this.loading = false
            }).catch((err)=>{
                this.loading = false
                this.$message.error(err.message||err.data.message)
            })
        },
        // 表格
        handleSizeChange(val) { // 分页
            this.form.pageSize = val
            this.form.currPage = 1
            this.getData()
        },
        handleCurrentChange(val) {
            this.form.currPage = val
            this.getData()
        },
    },
}
</script>
<style scoped lang="scss">
    .wrap{
        height: 100%;
    }
 </style>